<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>巡检-精工云MES系统移动端</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link href="/JG/Content/jquery/weui/style/weui.min.css" rel="stylesheet" />
    <link href="/JG/Content/jquery/jquery-weui/css/jquery-weui.min.css" rel="stylesheet" />
    <link href="/JG/Content/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/JG/Content/css/Global.css" rel="stylesheet" />
    <link rel="stylesheet" href="/JG/Content/css/PollingSelect.css">
    <script src="/JG/Content/LocalConfigs.js?v=1"></script>
    <script src="/JG/Content/LocalUserInfo.js"></script>
    
    <style>
        [v-cloak]{
            display: none;
        } 
    </style>
</head>
<body>
    <header class="header">
        <div class="empty">
            <span id="stations"></span>
        </div>
        <div class="header_title">
            <a href="javascript:;">巡检-选择</a>
        </div>
        <div class="item item2">
            <div class="user_img">
                <span class="back"><img src="/JG/Content/images/return.png" alt=""></span>
            </div>
        </div>
    </header>

    <section id="MainPage" class="MainPage" v-cloak>
        <div class="nav_select">
            <p class="select">
                    <a href="javascript:;"  class="active">选择产线</a> 
                    <!-- <span href="javascript:;">|</span> -->
                    <a href="javascript:;" >选择工位</a>
                    <!-- <span href="javascript:;">|</span> -->
                    <a href="javascript:;">选择工序</a>
                    <!-- <span href="javascript:;">|</span> -->
                    <a href="javascript:;">选择工单</a> 
            </p>
            <ul class="line">
                <li >
                    
                                    
                    <ul class="car_select">
                        <li v-for="(item,index) in FormData" :key="index">
                            <p  @click="toggle(index)">
                                <span>></span>
                                <span>{{item.DEPTNAME}}</span>
                            </p> 
                            <ul  class="line_select" v-show="cheJian===index">
                                <li v-for="(item,index) in pLine" :key="index" @click="pLines(item)">
                                    <span>{{item.CXMC}}</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                                <!-- <li>
                                    <span>产线2</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="chanxian"/>
                                </li> -->
                                
                            </ul>
                        </li>
                        <!-- <li>
                                <p @click="toggle(2)">
                                    <span>></span>
                                    <span>车间2</span>
                                </p> 
                            <ul  class="line_select" v-show="cheJian===2">
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                            </ul>
                        </li> -->
                        <!-- <li>
                                <p @click="toggle(3)">
                                    <span>></span>
                                    <span>车间1</span>
                                </p> 
                            <ul  class="line_select" v-show="cheJian===3">
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="chanxian"/>
                                </li>
                            </ul>
                        </li> -->
                    </ul>
                </li>
                <!-- <li>|</li> -->
                <li >
                    <!-- <a href="javascript:;">选择工位</a> -->
                    <ul class="gongwei_select">
                        <li>
                            <span class="active">工位选择</span>
                            <ul  class="gongwei">
                                <li v-for="(item,index) in gwList" :key="index">
                                    <span>{{item.GWMC}}</span>
                                    <input type="radio" name="gongwei" />
                                </li>
                                <!-- <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongwei"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongwei"/>
                                </li> -->
                            </ul>
                        </li>
                        
                    </ul>
                </li> 
                <!-- <li>|</li> -->
                <li >
                    <!-- <a href="javascript:;">选择工序</a> -->
                    <ul class="gongxu_select">
                        <li>
                            <span class="active">工序选择</span>
                            <ul  class="gongxu">
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="gongxu" />
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线1</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线2</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                                <li>
                                    <span>产线3</span>
                                    <input type="radio" name="gongxu"/>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!-- <li>|</li> -->
                <li >
                    <!-- <a href="javascript:;">选择工单</a> -->
                    <ul class="gongdan">
                        <li>
                            <span>工单号码1</span>
                            <span>产品1</span>
                            <span>任务数量</span>
                            <span>已完成数量</span>
                            <span>开始生产时间</span>
                            <input type="radio" name="gongdan" />
                            
                        </li>
                        <li>
                            <span>工单号码2</span>
                            <span>产品2</span>
                            <span>任务数量</span>
                            <span>已完成数量</span>
                            <span>开始生产时间</span>
                            <input type="radio" name="gongdan"/>
                            
                        </li>
                        <li>
                            <span>工单号码3</span>
                            <span>产品3</span>
                            <span>任务数量</span>
                            <span>已完成数量</span>
                            <span>开始生产时间</span>
                            <input type="radio" name="gongdan"/>
                            
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- <input type="button" value="提交" class="botn" style="cursor: pointer;width: 20%;height: 10%;margin: 0 40%;font-size: 2.5em;" /> -->
        <div class="mask">
            <div class="cover"></div>
            <div class="mod">
                <div class="contentText">是否要提交产线、工位、工序等信息</div>
                <div class="btn">
                    <button type="button" class="cancel">取消</button>
                    <button type="button" class="confirm" @click="confirm">确认</button>
                </div>
                
            </div>
        </div>
        
        
    </section>
    
</body>
<script src="/JG/Content/jquery/jquery-3.2.1.min.js"></script>
<script src="/JG/Content/jquery/jquery-weui/js/jquery-weui.min.js"></script>
<!-- <script src="/JG/Content/Utils.js?v=1"></script> -->
<script src="/JG/Content/vue-v2.34.js"></script>
<script type="text/javascript" src="/JG/Content/Flip-over.js?v=1"></script>

<script type="text/javascript">
    //赋值滚动条
    window.onload=function(){
        var BodyWidth=$(window).width();
        //console.log(BodyWidth);
        if(BodyWidth >1281){
            var BodyHeight=$(window).height();
            var MainPageHeight=BodyHeight-90;
            //赋值给div
            $("#MainPage").height(MainPageHeight);

        }else if(BodyWidth<1281 && BodyWidth>1023){
            var BodyHeight=$(window).height();
            var MainPageHeight=BodyHeight-90;
            //赋值给div
            $("#MainPage").height(MainPageHeight);

        }else if(BodyWidth<1024 && BodyWidth>767){
            var BodyHeight=$(window).height();
            var MainPageHeight=BodyHeight-90;
            //赋值给div
            $("#MainPage").height(MainPageHeight);
        }else {
            var BodyHeight=$(window).height();
            var MainPageHeight=BodyHeight-70;
            //赋值给div
            $("#MainPage").height(MainPageHeight);
        }
    }
</script>
<script type="text/javascript">
    var vmPage = new Vue({
        el:"#MainPage",
        data:{
            // status: false,
            
            FormData:[],    //车间集合
            pLine:[],       //产线集合
            gwList:[],     //工位集合
            gxList:[],     //工序集合
            gdList:[],    //工单集合
            cjId:"",
            cheJian:0,    //车间产线第一个选择项默认显示
            // sNum:1
        },
        mounted:function(){
            var currSelf=this;
            currSelf.cars();
            //currSelf.pLines();
            currSelf.gongWeis();
            currSelf.gongXus();  
                       
        },
        methods:{
            //切换滑块
            toggle: function(index) { 
                   
                //console.log(index);         
                if( this.cheJian===index){
                    this.cheJian=-1;
                    // this.cjId=this.FormData[index].DEPTCODE;
                    
                    this.pLines(this.cjId);
                }else{
                    this.cheJian=index;
                    // this.pLines(this.cjId);
                    // this.cjId=this.FormData[index].DEPTCODE;
                    // console.log(this.cjId);
                }               
            },
        
            //获取车间数据
            cars:function () {
                var currSelf=this;
                    
                    $.ajax({
                        type: "post",
                        async: true,
                        cache: true,
                        url: LocalConfig.SrvPath + "/jgmes/jgmesXunJianAction!getCjSu.action",
                        data: {
                            
                        },
                        dataType: "json",
                        success:  (ret)=> {
                            console.log(ret)
                            //var back = ReturnData(data);
                            if(ret.IsSuccess){
                                if(ret.Data.length>0){
                                    for(var i in ret.Data){
                                        var item = ret.Data[i];
                                        currSelf.FormData.push({
                                            DEPTCODE: item.values.DEPTCODE,
                                            DEPTNAME:item.values.DEPTNAME,//车间名称                                           
                                        });                                                                                                                  
                                    }                                   
                                }
                            }
                        },
                        error: function (xhr, status, errorThrown) {
                            //console.error(status);
                            $.alert("获取车间失败！");
                        },
                        complete: function () {
                            $.hideLoading();
                        }
                    });
            },
            //根据车间ID获取产线数据
            pLines:function(item){
                var currSelf=this;
                //console.log(currSelf.FormData[currSelf.cheJian].DEPTID);车间id
                
                //var chId=currSelf.FormData[currSelf.cheJian].DEPTID

                
                    $.ajax({
                        type: "post",
                        async: false,
                        cache: true,
                        url: LocalConfig.SrvPath + "/jgmes/jgmesBaseAction!getCxList.action",
                        data: {
                            DEPTCODE:Id,
                        },
                        dataType: "json",
                        success:  (ret)=> {
                            console.log(ret)
                            currSelf.pLine=[];
                            if(ret.IsSuccess){
                                if(ret.Data.length>0){
                                    for(var i in ret.Data){
                                        var item = ret.Data[i];
                                        currSelf.pLine.push({
                                            ID:item.CXSJ_STATUS_ID, //产线ID
                                            CXMC:item.CXSJ_CXMC,    //产线名称
                                            
                                        });
                                        
                                    }
                                }
                            }
                        },
                        error: function (xhr, status, errorThrown) {
                            //console.error(status);
                            $.alert("获取产线失败！");
                        },
                        complete: function () {
                            $.hideLoading();
                        }
                });
            },
            //根据产线ID获取工位数据
            gongWeis:function(){
                var currSelf=this;
                
                    $.ajax({
                        type: "post",
                        async: false,
                        cache: true,
                        url: LocalConfig.SrvPath + "/jgmes/jgmesBaseAction!getGwList.action",
                        data: {
                            CxId:currSelf.pLine.ID,
                        },
                        dataType: "json",
                        success:  (ret)=> {
                            console.log(ret)
                            if(ret.IsSuccess){
                                if(ret.Data.length>0){
                                    for(var i in ret.Data){
                                        var item = ret.Data[i];
                                        currSelf.gwList.push({
                                            ID:item.GW_GWBH,         //工位ID
                                            GWMC:item.GW_GWMC,//工位名称                                          
                                        });
                                        
                                    }
                                }
                            }
                        },
                        error: function (xhr, status, errorThrown) {
                            //console.error(status);
                            $.alert("获取工位失败！");
                        },
                        complete: function () {
                            $.hideLoading();
                        }
                });
            },
            //根据工位ID获取工序数据
            gongXus:function(){
                var currSelf=this;
                
                    $.ajax({
                        type: "post",
                        async: false,
                        cache: true,
                        url: LocalConfig.SrvPath + "/jgmes/jgmesBaseAction!getGXListByGwId.action",
                        data: {
                            gwId:currSelf.pLine.CXSJ_SZCJID,
                        },
                        dataType: "json",
                        success:  (ret)=> {
                            //console.log(ret)
                            if(ret.IsSuccess){
                                if(ret.Data.length>0){
                                    for(var i in ret.Data){
                                        var item = ret.Data[i];
                                        currSelf.pLine.push({
                                            
                                            "CXMC":item.CXSJ_CXMC,//产线名称
                                            
                                        });
                                        
                                    }
                                }
                            }
                        },
                        error: function (xhr, status, errorThrown) {
                            //console.error(status);
                            $.alert("获取工序失败！");
                        },
                        complete: function () {
                            $.hideLoading();
                        }
                });
            },
            //点击确认保存产线、工位、工序、工单数据
            confirm(){
                var currSelf=this;
                $.ajax({
                        type: "post",
                        async: false,
                        cache: true,
                        url: LocalConfig.SrvPath + "/jgmes/ jgmesXunJianAction!doXunJianSave.action",
                        data: {
                            
                        },
                        dataType: "json",
                        success:  (ret)=> {
                            //console.log(ret)
                            //var back = ReturnData(data);
                            if(ret.IsSuccess){
                                if(ret.Data.length>0){
                                    for(var i in ret.Data){
                                        var item = ret.Data[i];
                                        currSelf.FormData.push({
                                            "ID": item.values.DEPTID,
                                            "DEPTNAME":item.values.DEPTNAME,//车间名称
                                            
                                        });
                                        
                                        
                                    }
                                }
                            }
                            // currSelf.list=ret.Data;
                            // currSelf.FormData=currSelf.list.values;
                            // console.log(currSelf.FormData)
                        },
                        error: function (xhr, status, errorThrown) {
                            //console.error(status);
                            $.alert("获取车间失败！");
                        },
                        complete: function () {
                            $.hideLoading();
                        }
                    });
            }
        },
    });
</script>
<script type="text/javascript">
    $(".back").on("click", function () {
        
        window.location.href = "/JG/Features/Polling.html";
    });
   
    //获取点击事件的对象
    $(function(){
        $(".select>a").click(function(){
            //获取要显示或隐藏的对象
            var divShow = $(".line").children();
            //判断当前对象是否被选中，如果没选中的话进入if循环
            if (!$(this).hasClass('active')) {
                //获取当前对象的索引
                var index = $(this).index();
                //当前对象添加选中样式并且其同胞移除选中样式；
                $(this).addClass('active').siblings().removeClass('active');
                //索引对应的块显示
                $(divShow[index]).show();
                //索引对应的块的同胞隐藏
                $(divShow[index]).siblings().hide();
                
            }
            
            
        });
        $(".line").change(function(){
            var checkId=$("input:checked");
            if(checkId){  
                // setTimeout(function(){
                //     //获取要显示或隐藏的对象
                //     var divShow = $(".line").children();                   
                //     divShow.hide(); 
                // }, 500);                                        
            }
            
            if(checkId.length==$(".line>li").length){
                alert("已全选");
                setTimeout(function(){
                    //获取要显示或隐藏的对象
                    // var divShow = $(".line").children();                   
                    // divShow.hide(); 
                    $(".mask").show();
                    modal();
                }, 500); 
            }else{
                alert("有未选项")
            }

            
        })                                         
    });
    function modal(){
        //取消 
        $(".cancel").on("click",function(){
            $(".mask").hide();
        });
        //确认
        $(".confirm").on("click",function(){
            alert("数据提交成功");
            $(".mask").hide();
        });       
    }
                    

</script>
</html>